#HTML 的 <link> 标签

HTML <link> 元素规定了当前文档与某个外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标（比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

#属性

• as: 当在 <link> 元素上设置了 rel="preload" 时，该属性为必填属性；当设置了 rel="modulepreload"时，该属性为可选属性，否则不应使用。它指定了 <link> 正在加载的内容类型，这对于匹配请求、应用正确的内容安全策略和设置正确的 Accept 请求标头都是必要的。此外，rel="preload" 将其用作请求优先级的信号。下表列出了该属性的有效值及其适用的元素或资源。

• blocking: 该属性明确表示在获取外部资源时应阻止某些操作。它只能在 rel 属性包含 expect 或 stylesheet 关键字时才能使用。要阻止的操作必须是下面列出的以空格分隔的阻止标记列表。

  • render ：屏幕上的内容渲染被阻止。

• crossorigin: 该枚举属性表示在获取资源时是否必须使用 CORS。启用 CORS 的图像可以在 <canvas> 元素中重复使用，而不会受到污染。允许的值如下：

  • anonymous: 会发起一个跨源请求（即包含 Origin HTTP 标头），但不会发送任何认证信息（即不发送 cookie、X.509 证书和 HTTP 基本认证信息）。如果服务器没有给出源站凭证（不设置 Access-Control-Allow-Origin HTTP 标头），资源就会被污染并限制使用。

  • use-credentials: 会发起一个带有认证信息（进行 cookie、X.509 证书和/或 HTTP 基本认证）的跨域请求（即包含 Origin HTTP 标头）。如果服务器没有给出源站凭证（不设置 Access-Control-Allow-Origin HTTP 标头），资源就会被污染并限制使用。

• disabled: 仅对于 rel="stylesheet" 而言，disabled 布尔属性表示是否应加载所述样式表并将其应用于文档。如果在加载 HTML 时指定了disabled，则在页面加载过程中不会加载样式表。相反，如果将 disabled 属性更改为 false 或删除该属性，将按需加载样式表。

• fetchpriority: 为获取预加载资源时使用的相对优先级提供提示。允许的值：

  • high: 表示相对于其他同类型资源，以高优先级获取。

  • low: 表示相对于其他同类型资源，以低优先级获取。

  • auto: 默认值：表示自动确定相对于其他同类型资源的取值优先级。

• href: 此属性指定被链接资源的 URL。URL 可以是绝对的，也可以是相对的。

• hreflang: 此属性指明了被链接资源的语言。其意义仅供参考。可取的值参见 RFC 5646: 语言识别标签（又称 BCP 47）。仅当设置了 href 属性时才应设置该属性。

• imagesizes: 仅适用于 rel="preload" 和 as="image"，imagesizes 属性具有与 sizes 属性类似的语法和语义，表示要预载 img 元素使用的适当资源，其 srcset 和 sizes 属性具有相应的值。

• imagesrcset: 仅适用于 rel="preload" 和 as="image"，imagesrcset 属性具有与 srcset 属性类似的语法和语义，表示要预载 img 元素使用的适当资源，其 srcset 和 sizes 属性具有相应的值。

• integrity: 包含内联元数据——（你要求浏览器获取的）资源（文件）的以 base64 编码的密码散列值。浏览器可以使用这一点来验证所获取的资源是否已被传输且没有遭到意外的修改。该属性只有在指定了 rel 属性为 stylesheet、preload 或 modulepreload 时才能指定。参见子资源完整性。

• media: 该属性指定链接资源适用的媒体。其值必须是媒体类型或媒体查询。该属性主要用于链接外部样式表——它允许用户代理选择最适合其运行设备的样式表。

• referrerpolicy: 一个字符串，表示在获取资源时使用哪个 referrer：

  • no-referrer 表示将不会发送 Referer 标头。

  • no-referrer-when-downgrade 表示在不使用 TLS（HTTPS）的情况下导航到源时，不会发送 Referer 标头信息。如果未指定其他策略，这是用户代理的默认行为。

  • origin 意味着 referrer 网址将是页面的源，大致是协议、主机和端口。

  • origin-when-cross-origin 这意味着导航到其他来源将仅限于协议、主机和端口，而在同一源上导航将包括 referrer 的路径。

  • unsafe-url 意味着 referrer 网址将包含源和路径（但不包括片段、密码或用户名）。这种情况是不安全的，因为它可能会将源和路径从受 TLS 保护的资源泄漏到不安全的源。

• rel: 此属性命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分隔的列表。

• sizes: 这个属性定义了包含相应资源的可视化媒体中的图标的大小。只有在 rel 包含 icon 或诸如 Apple 的 apple-touch-icon 等非标准类型的值时，它才可以存在。它可能具有如下值：

  • any 表示图标可以按矢量格式缩放到任意大小，例如 image/svg+xml。

  • <像素宽度>x<像素高度> 一个由空白符分隔的尺寸列表。每一个都以 或 <像素宽度>X<像素高度> 给出。尺寸列表中的每一个尺寸都必须包含在资源里。

• title: title 属性在 <link> 元素上有特殊的语义。当用于 <link rel="stylesheet"> 时，它定义了一个默认样式表或备用样式表。

• type: 这个属性被用于定义链接的内容的类型。这个属性的值应该是类似于 text/html、text/css 这样的 MIME 类型。该属性的通常用法是定义被引用的样式表类型（如 text/css），但由于 CSS 是网络上使用的唯一样式表语言，因此不仅可以省略 type 属性，而且现在已成为推荐做法。它还用于 rel="preload" 链接类型，以确保浏览器只下载其支持的文件类型。